<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-size属性设置背景图像大小</title>

    <style>

        .test p{
            border:3px dashed #666;
            width: 300px;
            height:300px;
            color:#CC9900;
            font-weight:700;
            background:#fff url(img/girl.jpg) no-repeat;
        }
        /*
        background-size:
        <length>：用长度值指定背景图像大小。不允许负值。(常用)
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。(常用)
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
        */
        .test .cover p{
            background-size:cover;/*重点*/
            background-size:220px 282px;
        }

        .test .contain p{
            background-size:contain;
        }
    </style>
</head>
<body>
<h1>background-size属性设置背景图像大小</h1>
<ul class="test">
    <li class="cover">
        <h2>cover</h2>
        <img src="image/girl.jpg" alt="girl" width="220" height="282">
        <p></p>
    </li>
    <li class="contain">
        <h2>contain</h2>
        <p></p>
    </li>
</ul>



</body>
</html>